<template>
    <div class="totalTopBarStyle" >
        <el-row type="flex"  justify="space-between" class="headerLayout">
            <el-col :span="4" class="headerLayoutComponent">
                <img src="../../assets/static/img/index_logo_front.png" height="50" width="50"/>
                <span class="textLogo">不停步，不满足，不断进步</span>
            </el-col>
            <el-col :span="14" class="menuLayoutComponent">
                <el-menu :default-active="activeIndex"
                         @select="handleSelect"
                         class="el-menu-demo"
                         mode="horizontal"
                         style="border-bottom: 0px"
                         :router="true">
                    <el-menu-item index="1">首页</el-menu-item>
                    <el-submenu index="">
                        <template slot="title">博客学习</template>
                        <el-menu-item index="/frontFramework/blogManage" >博客首页</el-menu-item>
<!--                        <el-menu-item index="2-3">选项3</el-menu-item>-->
<!--                        <el-submenu index="2-4">-->
<!--                            <template slot="title">选项4</template>-->
<!--                            <el-menu-item index="2-4-1">选项1</el-menu-item>-->
<!--                            <el-menu-item index="2-4-2">选项2</el-menu-item>-->
<!--                            <el-menu-item index="2-4-3">选项3</el-menu-item>-->
<!--                        </el-submenu>-->
                    </el-submenu>
<!--                    <el-menu-item index="3" disabled>消息中心</el-menu-item>-->
<!--                    <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>-->
                </el-menu>
            </el-col>
<!--            用户头像部分展示-->
            <el-col :span="4" class="headerLayoutComponent" style="text-align: right">
                <div v-if="currentUser==null" class="loginButtonArea">
                    <el-button type="info" @click="toLoginView">请登录 <i class="el-icon-s-custom"></i></el-button>
                </div>
                <div v-else  class="userStyle">
                    <!--                    用户头像-->
                    <div style="display: inline-block;height: 100%;">
                        <div style="display: flex;align-items: center;height: 100%;padding-right: 5px">
                            <el-avatar v-if="currentUser.avatarUrl" :src="currentUser.avatarUrl" class="avatar"></el-avatar>
                            <el-avatar v-else icon="el-icon-user-solid"></el-avatar>
                        </div>
                    </div>

                    <!--            下拉框-->
                    <el-dropdown trigger="click" style="float: right;line-height: 60px;height: 100%;">
                        <div class="el-dropdown-link" style="display: inline-block">
                            <!--                    用户昵称-->
                            <div class="userNicknameStyle">
                                <span>{{currentUser.nickname}}</span>
                            </div>
                            <!--                    展开框-->
                            <div class="showProfile">
                                <i class="el-icon-arrow-down"></i>
                            </div>
                        </div>

                        <el-dropdown-menu slot="dropdown" style="width: 100px;"  >
                            <el-dropdown-item>
                                <div class="dropMenuItemStyle" @click="goHome">退出系统</div>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "FrontTopBar",
        data(){
            return{
                activeIndex: '1',       //激活的头部导航栏 index
                activeKeyPath:[],       //激活的头部导航栏 index path
                currentUser:(localStorage.getItem("user")!=null)?JSON.parse(localStorage.getItem("user")):null,   //当前登录的用户
            }
        },
        methods:{
            //处理选中的高亮状态
            handleSelect(key, keyPath){
                this.activeIndex=key;
                this.activeKeyPath=keyPath;
            },
            //跳转至登录界面
            toLoginView(){
                this.$router.push("/login");
            },
            //退出系统
            goHome(){
                localStorage.removeItem("user");
                this.$router.push("/login");
                this.$message({
                    message: "退出系统成功",
                    type: 'success'
                });
            }
        }
    }
</script>

<style scoped>

    .totalTopBarStyle{
        border-bottom: solid 1px #e6e6e6;
        width: 1920px;
        height: 61px;
        position: fixed;
        background: white;
        z-index: 1;
    }

    .headerLayout{
        border-bottom: solid 1px #e6e6e6;

    }

    .userStyle{
        width: 100%;
        height: 100%;
        margin-right: 100px;
        cursor: pointer;

    }

    .loginButtonArea{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .headerLayoutComponent{
        height: 60px;
        display: flex;
        align-items: center;
        margin: 0px 15px 0px 5px;
    }
    .menuLayoutComponent{
        display: flex;
        justify-content: center;
    }

    .textLogo{
        margin-left: 10px;
        color: #7b787aa3;
        font-size: 15px;
    }


    .dropMenuItemStyle{
        height: 100%;
        width: 100%;
    }

    .userNicknameStyle{
        margin: 0px 10px 0px 15px;
        display: inline-block;
        line-height: 55px;
        font-size: 16px;
    }



    .showProfile{
        display: inline-block;
        padding-right: 5px;
    }
</style>
